<template>
  <div ref="chart" style="width: 100%;height: 238px;">

  </div>
</template>
<script>


export default {
  name: 'ChartOne',
  props: {
    
 
      barData:{
        data:[],
        date:[]
      }
   
 },
 data(){
  return {
    myChart:null
  }
},

 mounted(){
 

 },
      watch: {
        barData: {
      handler(val) {
        // 判断传入的option是否有内容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.initChart();
          })
        }
      },
      immediate: true,
      deep: true
    },
  },

 methods:{
    initChart(){
      // 如果已有实例，则先清理
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(this.$refs.chart);
      const option = {tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: this.barData.date,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: this.barData.data
    }
  ]
    }
    this.myChart.setOption(option);
    // 当窗口大小改变 echarts重置大小
    window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
}

</script>

<style scoped>

</style>